<template>
  <div class="app-container">
    <div class="chat-main-container">
      <!-- 左侧联系人列表 -->
      <div class="contact-list-container">
        <div class="contact-header">
          <h3 class="header-title">联系人</h3>
        </div>
        <div class="contact-list">
          <div
            v-for="contact in contacts"
            :key="contact.id"
            class="contact-item"
            :class="{ 'active': selectedContact && selectedContact.id === contact.id }"
            @click="selectContact(contact)"
          >
            <div class="avatar-container">
              <img :src="contact.avatar" alt="联系人头像" class="contact-avatar" />
              <span v-if="contact.unread > 0" class="unread-badge">{{ contact.unread > 99 ? '99+' : contact.unread }}</span>
            </div>
            <div class="contact-info">
              <div class="contact-name-row">
                <span class="contact-name">{{ contact.name }}</span>
                <span class="contact-time">{{ contact.lastTime }}</span>
              </div>
              <div class="last-message">{{ contact.lastMessage }}</div>
            </div>
          </div>
        </div>
      </div>

      <!-- 右侧聊天内容 -->
      <div class="chat-container" v-if="selectedContact">
        <div class="chat-header">
          <div class="header-left">
            <img :src="selectedContact.avatar" alt="联系人头像" class="chat-avatar" />
            <div class="chat-header-info">
              <h3 class="chat-contact-name">{{ selectedContact.name }}</h3>
              <span class="chat-status online">在线</span>
            </div>
          </div>
          <div class="header-right">
            <el-dropdown trigger="click">
              <i class="el-icon-more" style="font-size: 20px; cursor: pointer;"></i>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item @click.native="clearChatHistory">清空聊天记录</el-dropdown-item>
                <el-dropdown-item>查看联系人详情</el-dropdown-item>
                <el-dropdown-item divided>举报</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
        </div>
        <div class="chat-body">
          <div class="message-list">
            <!-- 日期分隔符 -->
            <div class="date-separator" v-if="currentMessages.length > 0">
              <span>今天</span>
            </div>
            
            <div
              v-for="message in currentMessages"
              :key="message.id"
              class="message-wrapper"
              :class="{ 'me': message.sender === 'me', 'other': message.sender === 'other' }"
            >
              <template v-if="message.sender === 'other'">
                <img :src="selectedContact.avatar" alt="头像" class="message-avatar" />
                <div class="message-content-wrapper">
                  <div 
                    class="message-bubble"
                    :class="{ 'me': message.sender === 'me', 'other': message.sender === 'other' }"
                  >
                    <div class="message-content">{{ message.content }}</div>
                  </div>
                  <div class="message-time">{{ formatTimeFull(message.timestamp) }}</div>
                </div>
              </template>
              <template v-else>
                <div class="message-content-wrapper">
                  <div 
                    class="message-bubble"
                    :class="{ 'me': message.sender === 'me', 'other': message.sender === 'other' }"
                  >
                    <div class="message-content">{{ message.content }}</div>
                  </div>
                  <div class="message-time">{{ formatTimeFull(message.timestamp) }}</div>
                </div>
                <img :src="getUserAvatar()" alt="我的头像" class="message-avatar" />
              </template>
            </div>
          </div>
        </div>
        <div class="chat-footer">
          <div class="chat-tools">
            <i class="el-icon-picture-outline" title="发送图片"></i>
            <i class="el-icon-folder-opened" title="发送文件"></i>
            <i class="el-icon-scissors" title="剪切板"></i>
            <i class="el-icon-star-off" title="收藏"></i>
          </div>
          <div class="input-container">
            <el-input
              v-model="inputMessage"
              placeholder="输入消息..."
              @keyup.enter.native="sendMessage"
              class="message-input"
              type="textarea"
              :rows="1"
              resize="none"
            ></el-input>
            <el-button type="primary" @click="sendMessage" class="send-button" icon="el-icon-s-promotion">发送</el-button>
          </div>
        </div>
      </div>

      <!-- 未选择联系人时的占位 -->
      <div class="no-contact-selected" v-else>
        <div class="empty-state">
          <div class="empty-icon">
            <i class="el-icon-chat-dot-round"></i>
          </div>
          <h3>欢迎使用消息系统</h3>
          <p>请选择一个联系人开始聊天</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { listConversations } from "@/api/campus/conversations";
import { listMessages, addMessages, clearMessages } from "@/api/campus/messages";
import { mapGetters } from "vuex";

export default {
  name: "ClubMessage",
  data() {
    return {
      inputMessage: '',
      selectedContact: null,
      contacts: [],
      // 存储所有联系人的聊天记录
      messageHistory: {
      }
    }
  },
  computed: {
    // 获取当前选中联系人的聊天记录
    currentMessages() {
      if (!this.selectedContact) return [];
      return this.messageHistory[this.selectedContact.id] || [];
    },
    ...mapGetters(["id", "avatar"]) // 获取当前登录用户的ID和头像
  },
  created() {
    this.loadConversations();
  },
  methods: {
    // 获取当前用户头像
    getUserAvatar() {
      // 使用用户头像或默认头像
      return this.avatar || 'https://via.placeholder.com/40/9b59b6/ffffff?text=我';
    },
    // 加载会话列表
    loadConversations() {
      // 使用当前登录用户的ID获取会话列表
      // 修复参数传递问题，确保正确传递用户ID参数
      const queryParams = {
        userId: this.id
      };
      
      listConversations(queryParams).then(response => {
        this.contacts = response.rows.map((item, index) => {
          // 处理头像路径，如果是相对路径则加上基础URL
          let avatarUrl = item.contactAvatar || 'https://via.placeholder.com/60/3498db/ffffff?text=联';
          if (avatarUrl && !avatarUrl.startsWith('http') && !avatarUrl.startsWith('https')) {
            // 如果是相对路径，则加上基础路径
            avatarUrl = process.env.VUE_APP_BASE_API + avatarUrl;
          }
          
          // 根据当前用户ID确定未读消息数
          let unreadCount = 0;
          if (item.user1Id === this.id) {
            unreadCount = item.unreadCount1 || 0;
          } else if (item.user2Id === this.id) {
            unreadCount = item.unreadCount2 || 0;
          }
          
          return {
            id: item.id, // 使用实际的会话ID
            userId: item.contactId, // 添加联系人ID
            name: item.contactName || '未知联系人',
            avatar: avatarUrl,
            lastMessage: item.lastMsg || '暂无消息', // 使用后端返回的lastMsg字段
            lastTime: item.lastTime ? this.formatTime(this.parseBackendTime(item.lastTime)) : '刚刚',
            unread: unreadCount
          };
        });
      }).catch(error => {
        console.error("加载会话列表失败:", error);
        // 如果加载失败，使用默认数据
        this.contacts = [
          {
            id: 1,
            userId: 1001,
            name: '篮球社',
            avatar: 'https://via.placeholder.com/60/3498db/ffffff?text=篮',
            lastMessage: '下周有篮球比赛，记得参加',
            lastTime: '10:30',
            unread: 2
          },
          {
            id: 2,
            userId: 1002,
            name: '音乐社',
            avatar: 'https://via.placeholder.com/60/e74c3c/ffffff?text=音',
            lastMessage: '周五下午3点排练',
            lastTime: '昨天',
            unread: 0
          },
          {
            id: 3,
            userId: 1003,
            name: '编程社',
            avatar: 'https://via.placeholder.com/60/2ecc71/ffffff?text=编',
            lastMessage: '技术分享会筹备中',
            lastTime: '周三',
            unread: 1
          },
          {
            id: 4,
            userId: 1004,
            name: '文学社',
            avatar: 'https://via.placeholder.com/60/9b59b6/ffffff?text=文',
            lastMessage: '下周二交稿截止',
            lastTime: '上周',
            unread: 0
          }
        ];
      });
    },
    // 选择联系人
    selectContact(contact) {
      this.selectedContact = contact;
      // 重置未读消息数
      contact.unread = 0;
      
      // TODO: 通知后端已读消息
      
      // 加载该会话的聊天记录
      this.loadChatMessages(contact.id);
      
      // 自动滚动到底部
      this.$nextTick(() => {
        this.scrollToBottom();
      });
    },
    // 发送消息
    sendMessage() {
      if (!this.inputMessage.trim() || !this.selectedContact) return;
      
      // 构造要发送的消息对象
      const messageData = {
        conversationId: this.selectedContact.id,
        senderId: this.id,
        content: this.inputMessage,
        sendTime: this.formatTimeForBackend(new Date()) // 使用当前时间
      };
      
      // 创建本地消息用于即时显示
      const localMessage = {
        id: Date.now(),
        content: this.inputMessage,
        sender: 'me',
        timestamp: this.formatTimeForBackend(new Date()) // 使用相同的时间格式
      };
      
      // 将消息立即添加到当前联系人的聊天记录中（乐观更新）
      if (!this.messageHistory[this.selectedContact.id]) {
        this.$set(this.messageHistory, this.selectedContact.id, []);
      }
      this.messageHistory[this.selectedContact.id].push(localMessage);
      
      // 更新联系人的最后消息
      this.updateContactLastMessage(this.selectedContact.id, this.inputMessage);
      
      // 清空输入框
      this.inputMessage = '';
      
      // 自动滚动到底部
      this.$nextTick(() => {
        this.scrollToBottom();
      });
      
      // 调用后端API发送消息
      addMessages(messageData).then(response => {
        console.log("消息发送成功:", response);
        // 如果服务器返回了正式的ID，更新本地消息ID
        if (response.data && response.data.id) {
          const messageIndex = this.messageHistory[this.selectedContact.id].findIndex(
            msg => msg.id === localMessage.id
          );
          if (messageIndex !== -1) {
            this.messageHistory[this.selectedContact.id][messageIndex].id = response.data.id;
            // 使用后端返回的准确时间
            if (response.data.sendTime) {
              this.messageHistory[this.selectedContact.id][messageIndex].timestamp = this.parseBackendTime(response.data.sendTime);
              // 更新联系人列表中的最后消息时间和内容
              this.updateContactLastMessage(this.selectedContact.id, this.inputMessage, response.data.sendTime);
            }
          }
        }
      }).catch(error => {
        console.error("发送消息失败:", error);
        this.$modal.notifyError("消息发送失败");
      });
    },
    // 模拟对方回复
    simulateReply() {
      if (!this.selectedContact) return;
      
      const replies = [
        '收到，我稍后回复你',
        '好的，明白了',
        '这个提议不错',
        '我会考虑的',
        '没问题',
        '谢谢你的消息',
        '稍等一下，我正在处理',
        '这个想法很棒！',
        '让我确认一下细节'
      ];
      
      setTimeout(() => {
        const replyMessage = {
          id: Date.now(),
          content: replies[Math.floor(Math.random() * replies.length)],
          sender: 'other',
          timestamp: new Date()
        };
        
        this.messageHistory[this.selectedContact.id].push(replyMessage);
        this.updateContactLastMessage(this.selectedContact.id, replyMessage.content, this.formatTimeForBackend(new Date()));
        
        // 自动滚动到底部
        this.scrollToBottom();
      }, 1000 + Math.random() * 2000);
    },
    // 加载聊天消息
    loadChatMessages(conversationId) {
      if (!conversationId) return;
      
      console.log("正在加载会话ID为 " + conversationId + " 的聊天记录");
      
      // 初始化该会话的消息列表
      this.$set(this.messageHistory, conversationId, []);
      
      // 调用API获取聊天记录
      listMessages({conversationId: conversationId}).then(response => {
        console.log("成功获取会话 " + conversationId + " 的聊天记录:", response);
        // 将获取到的消息存储到消息历史中
        const messages = response.rows.map(item => {
          return {
            id: item.id,
            content: item.content,
            sender: item.senderId == this.id ? 'me' : 'other',
            timestamp: this.parseBackendTime(item.sendTime)
          };
        });
        
        // 更新该会话的消息历史
        this.$set(this.messageHistory, conversationId, messages);
        
        // 自动滚动到底部
        this.$nextTick(() => {
          this.scrollToBottom();
        });
      }).catch(error => {
        console.error("加载聊天消息失败:", error);
      });
    },
    // 更新联系人的最后消息
    updateContactLastMessage(contactId, message, time) {
      const contact = this.contacts.find(c => c.id === contactId);
      if (contact) {
        contact.lastMessage = message.length > 20 ? message.substring(0, 20) + '...' : message;
        contact.lastTime = time ? this.formatTime(this.parseBackendTime(time)) : this.formatTime(new Date());
        // 如果不是当前选中的联系人，增加未读数
        if (this.selectedContact && this.selectedContact.id !== contactId) {
          contact.unread++;
        }
      }
    },
    // 格式化时间
    formatTime(date) {
      const now = new Date();
      const messageDate = new Date(date);
      
      const diffDays = Math.floor((now - messageDate) / (1000 * 60 * 60 * 24));
      
      if (diffDays === 0) {
        // 今天
        return messageDate.toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit' });
      } else if (diffDays === 1) {
        // 昨天
        return '昨天';
      } else if (diffDays < 7) {
        // 一周内
        const weekdays = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];
        return weekdays[messageDate.getDay()];
      } else {
        // 其他时间
        return messageDate.toLocaleDateString('zh-CN');
      }
    },
    // 格式化完整时间（年月日时分秒）
    formatTimeFull(date) {
      const messageDate = new Date(date);
      const year = messageDate.getFullYear();
      const month = String(messageDate.getMonth() + 1).padStart(2, '0');
      const day = String(messageDate.getDate()).padStart(2, '0');
      const hours = String(messageDate.getHours()).padStart(2, '0');
      const minutes = String(messageDate.getMinutes()).padStart(2, '0');
      const seconds = String(messageDate.getSeconds()).padStart(2, '0');
      
      return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
    },
    // 为后端格式化时间
    formatTimeForBackend(date) {
      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, '0');
      const day = String(date.getDate()).padStart(2, '0');
      const hours = String(date.getHours()).padStart(2, '0');
      const minutes = String(date.getMinutes()).padStart(2, '0');
      const seconds = String(date.getSeconds()).padStart(2, '0');
      
      return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
    },
    // 解析后端返回的时间
    parseBackendTime(timeString) {
      // 处理后端返回的时间格式 "yyyy-MM-dd HH:mm:ss"
      if (!timeString) return new Date();
      const timeParts = timeString.split(' ');
      const datePart = timeParts[0].replace(/-/g, '/');
      const timePart = timeParts[1] || '00:00:00';
      return new Date(`${datePart} ${timePart}`);
    },
    // 滚动到底部
    scrollToBottom() {
      this.$nextTick(() => {
        const chatBody = this.$el.querySelector('.chat-body');
        if (chatBody) {
          chatBody.scrollTop = chatBody.scrollHeight;
        }
      });
    },
    // 清空聊天记录
    clearChatHistory() {
      if (!this.selectedContact) return;
      
      this.$confirm('确定要清空聊天记录吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        clearMessages(this.selectedContact.id).then(response => {
          console.log("聊天记录已清空:", response);
          this.$set(this.messageHistory, this.selectedContact.id, []);
          this.$modal.notifySuccess("聊天记录已清空");
        }).catch(error => {
          console.error("清空聊天记录失败:", error);
          this.$modal.notifyError("清空聊天记录失败");
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消清空'
        });       
      });
    }
  }
}
</script>

<style scoped>
.app-container {
  height: calc(100vh - 84px);
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 20px;
  overflow: hidden;
}

/* 主容器使用flex布局，确保子元素水平排列 */
.chat-main-container {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  height: 100%;
  overflow: hidden;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  background-color: #fff;
  position: relative;
}

/* 左侧联系人列表 - 固定宽度 */
.contact-list-container {
  width: 300px;
  min-width: 300px;
  display: flex;
  flex-direction: column;
  background: linear-gradient(to bottom, #f8f9fa, #e9ecef);
  flex-shrink: 0;
  border-radius: 12px 0 0 12px;
  position: relative;
}

/* 分割线 */
.chat-main-container::after {
  content: '';
  position: absolute;
  left: 300px;
  top: 0;
  height: 100%;
  width: 1px;
  background: linear-gradient(to bottom, transparent, #ccc, transparent);
  box-shadow: 1px 0 5px rgba(0, 0, 0, 0.1);
  z-index: 100;
}

.contact-header {
  padding: 20px;
  border-bottom: 1px solid #eee;
  background: linear-gradient(to right, #667eea, #764ba2);
  color: white;
  border-radius: 12px 0 0 0;
}

.header-title {
  font-size: 18px;
  font-weight: 600;
  margin: 0;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.contact-list {
  flex: 1;
  overflow-y: auto;
  padding: 10px 0;
}

.contact-item {
  padding: 15px 20px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #f0f0f0;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  margin: 0 10px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(10px);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

.contact-item:hover {
  background: linear-gradient(to right, #667eea, #764ba2);
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.contact-item:hover .contact-name,
.contact-item:hover .last-message,
.contact-item:hover .contact-time {
  color: white !important;
}

.contact-item.active {
  background: linear-gradient(to right, #667eea, #764ba2);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.contact-item.active .contact-name,
.contact-item.active .last-message,
.contact-item.active .contact-time {
  color: white !important;
}

.avatar-container {
  position: relative;
  margin-right: 15px;
}

.contact-avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid rgba(255, 255, 255, 0.5);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.contact-item:hover .contact-avatar {
  border-color: white;
  transform: scale(1.05);
}

.unread-badge {
  position: absolute;
  top: -5px;
  right: -5px;
  background: linear-gradient(135deg, #f56c6c, #e64a19);
  color: white;
  font-size: 11px;
  font-weight: 600;
  min-width: 20px;
  height: 20px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 6px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  border: 2px solid white;
}

.contact-info {
  flex: 1;
  min-width: 0;
}

.contact-name-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 5px;
}

.contact-name {
  font-weight: 600;
  color: #333;
  font-size: 15px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.contact-time {
  font-size: 11px;
  color: #999;
  font-weight: 500;
}

.last-message {
  font-size: 13px;
  color: #666;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 180px;
}

/* 右侧聊天区域 - 占据剩余空间 */
.chat-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-width: 0;
  background: #f0f2f5;
}

.chat-header {
  padding: 15px 20px;
  border-bottom: 1px solid #eee;
  background: white;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  z-index: 10;
}

.header-left {
  display: flex;
  align-items: center;
}

.chat-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  margin-right: 12px;
  border: 2px solid #e6e6e6;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.chat-header-info {
  display: flex;
  flex-direction: column;
}

.chat-contact-name {
  font-size: 16px;
  font-weight: 600;
  color: #333;
  margin: 0;
}

.chat-status {
  font-size: 12px;
  color: #999;
  margin-top: 2px;
}

.chat-status.online {
  color: #67c23a;
}

.chat-status.online::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #67c23a;
  margin-right: 5px;
}

.header-right {
  color: #666;
  cursor: pointer;
}

.header-right i {
  font-size: 20px;
  transition: transform 0.3s ease;
}

.header-right i:hover {
  transform: rotate(90deg);
}

.chat-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  background: #f0f2f5 url('') repeat;
}

.message-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 1000px;
  margin: 0 auto;
}

.date-separator {
  align-self: center;
  background: linear-gradient(to right, #667eea, #764ba2);
  color: white;
  font-size: 12px;
  padding: 6px 16px;
  border-radius: 20px;
  margin: 10px 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  font-weight: 500;
}

.message-wrapper {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  max-width: 85%;
  animation: messageEnter 0.3s ease-out;
}

@keyframes messageEnter {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.message-wrapper.other {
  align-self: flex-start;
}

.message-wrapper.me {
  align-self: flex-end;
}

.message-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #e6e6e6;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  align-self: flex-end;
  margin-bottom: 5px;
}

.message-content-wrapper {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: 100%;
}

.message-wrapper.other .message-content-wrapper {
  align-items: flex-start;
}

.message-wrapper.me .message-content-wrapper {
  align-items: flex-end;
}

.message-bubble {
  position: relative;
  padding: 12px 16px;
  border-radius: 18px;
  word-wrap: break-word;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  font-size: 14px;
  line-height: 1.5;
  max-width: 100%;
  transition: all 0.3s ease;
}

.message-bubble:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  transform: translateY(-2px);
}

.message-bubble.other {
  background: linear-gradient(135deg, #e3f2fd, #bbdefb);
  border-bottom-left-radius: 5px;
  color: #333;
}

.message-bubble.other::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: -8px;
  width: 16px;
  height: 16px;
  background: linear-gradient(135deg, #e3f2fd, #bbdefb);
  border-bottom-right-radius: 50%;
  clip-path: polygon(0 0, 100% 0, 100% 100%);
}

.message-bubble.me {
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: white;
  border-bottom-right-radius: 5px;
}

.message-bubble.me::before {
  content: '';
  position: absolute;
  bottom: 0;
  right: -8px;
  width: 16px;
  height: 16px;
  background: linear-gradient(135deg, #667eea, #764ba2);
  border-bottom-left-radius: 50%;
  clip-path: polygon(0 0, 0 100%, 100% 0);
}

.message-content {
  font-size: 15px;
  line-height: 1.5;
  word-break: break-word;
}

.message-time {
  font-size: 11px;
  color: #999;
  margin-top: 6px;
  margin-left: 10px;
}

.message-wrapper.me .message-time {
  margin-left: 0;
  margin-right: 10px;
  color: #8cc5ff;
}

.chat-footer {
  padding: 15px 20px;
  border-top: 1px solid #e6e6e6;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: white;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
}

.chat-tools {
  display: flex;
  gap: 20px;
  color: #666;
  padding: 0 10px;
}

.chat-tools i {
  font-size: 18px;
  cursor: pointer;
  transition: all 0.3s ease;
  padding: 5px;
  border-radius: 50%;
}

.chat-tools i:hover {
  color: #667eea;
  background: #f0f2f5;
  transform: scale(1.1);
}

.input-container {
  display: flex;
  gap: 10px;
  align-items: flex-end;
}

.message-input {
  flex: 1;
  border-radius: 24px;
  border: 1px solid #dcdfe6;
  transition: all 0.3s ease;
  background: #f0f2f5;
  padding: 8px 15px;
  min-height: 40px;
  max-height: 120px;
  overflow-y: auto;
}

.message-input:focus-within {
  border-color: #667eea;
  box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.2);
  background: white;
}

.send-button {
  border-radius: 24px;
  padding: 10px 20px;
  font-weight: 500;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  background: linear-gradient(135deg, #667eea, #764ba2);
  border: none;
  color: white;
  box-shadow: 0 4px 10px rgba(102, 126, 234, 0.3);
  display: flex;
  align-items: center;
  gap: 5px;
}

.send-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 15px rgba(102, 126, 234, 0.4);
  background: linear-gradient(135deg, #764ba2, #667eea);
}

.send-button:active {
  transform: translateY(0);
}

.no-contact-selected {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f0f2f5 url('') repeat;
}

.empty-state {
  text-align: center;
  color: #666;
  padding: 40px;
  background: rgba(255, 255, 255, 0.8);
  border-radius: 15px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(10px);
}

.empty-icon {
  font-size: 64px;
  margin-bottom: 20px;
  background: linear-gradient(135deg, #667eea, #764ba2);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.empty-state h3 {
  font-size: 24px;
  margin-bottom: 10px;
  color: #333;
  font-weight: 600;
}

.empty-state p {
  font-size: 16px;
  color: #666;
}

/* 滚动条样式 */
.contact-list::-webkit-scrollbar,
.chat-body::-webkit-scrollbar {
  width: 8px;
}

.contact-list::-webkit-scrollbar-track,
.chat-body::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.05);
  border-radius: 4px;
}

.contact-list::-webkit-scrollbar-thumb,
.chat-body::-webkit-scrollbar-thumb {
  background: linear-gradient(135deg, #667eea, #764ba2);
  border-radius: 4px;
}

.contact-list::-webkit-scrollbar-thumb:hover,
.chat-body::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(135deg, #764ba2, #667eea);
}

/* 响应式设计 */
@media (max-width: 768px) {
  .app-container {
    padding: 10px;
    height: calc(100vh - 64px);
  }
  
  .chat-main-container {
    height: 100%;
    border-radius: 8px;
  }
  
  .contact-list-container {
    width: 260px;
    min-width: 260px;
  }
  
  .message-content-wrapper {
    max-width: 85%;
  }
  
  .contact-item {
    padding: 12px 15px;
  }
  
  .contact-avatar {
    width: 40px;
    height: 40px;
  }
  
  .chat-header {
    padding: 12px 15px;
  }
  
  .chat-avatar {
    width: 32px;
    height: 32px;
  }
  
  .chat-body {
    padding: 15px;
  }
  
  .chat-footer {
    padding: 12px 15px;
  }
  
  .message-bubble {
    padding: 10px 14px;
  }
  
  .message-content {
    font-size: 14px;
  }
}
</style>